// (function(){
function xygTable(options) {
    this.id = options.id ? options.id : alert('请输入table的id');
    this.ajaxBack = options.ajaxBack
    this.theadTr = document.querySelector(`${this.id} thead tr`)
    this.theadTds = this.theadTr.children;
    this.cloneTheadTds=document.querySelector(`${this.id} thead tr`).cloneNode(true)
    this.props = [];
    this.fixedLeft = [];
    this.fixedRight = [];
    this.template = '';
    Array.from(this.theadTds).forEach((item) => {
        if (item.getAttribute('fixed') == 'left') {
            this.fixedLeft.push(item.getAttribute('prop'))
         
            item.style.zIndex = 2
        } else if (item.getAttribute('fixed') == 'right') {
            this.fixedRight.push(item.getAttribute('prop'))
            
            item.style.zIndex = 2
        } else {
            this.props.push(item.getAttribute('prop'))
        }
        item.style.position = 'sticky'
        item.style.top = 0
    })
    document.querySelector(`${this.id} thead`).removeChild(this.theadTr)
    this.fixedRight=this.fixedRight.reverse()
    this.props = [...this.fixedLeft, ...this.props, ...this.fixedRight];
    document.querySelector(`${this.id} thead`).innerHTML="<tr></tr>"
    this.props.forEach((prop,index)=>{
        Array.from( this.cloneTheadTds.children).forEach((dom)=>{
            if(index==0){
                dom.style.position = 'sticky'
                dom.style.top = 0
                dom.style.zIndex = 1
            }
            if(dom.getAttribute('prop')==prop){
                if(dom.getAttribute('fixed')){
                    dom.style.zIndex = 2
                }
                document.querySelector(`${this.id} thead tr`).append(dom)
            }
           
          })
    })
    this.stringTemplate = function (data) {
    
        data.forEach((item,index) => {
            var tds = '';
            this.props.forEach((prop) => {
        
                if (this.fixedLeft.includes(prop)) {
                    tds += `<td class="${prop}XygtableLeft" style='z-index:1;position: sticky;left:0;background-color: lightpink;'>${item[prop]}</td>`
                } else if (this.fixedRight.includes(prop)) {
                    tds += `<td  class="${prop}XygtableRight" style='z-index:1;position: sticky;right:0;background-color: lightpink;'>${item[prop]}</td>`
                } else {
                    tds += `<td>${item[prop]}</td>`
                }
            })
            var tr = `<tr>${tds}</tr>`;
            this.template += tr
        })
    }
    this.ajaxBack()

}
xygTable.prototype.renderTable = function (json) {
    this.stringTemplate(json)
    document.querySelector(`${this.id} tbody`).innerHTML = this.template;
    this.fixedHeader()
}

xygTable.prototype.fixedHeader = function () {
    var leftDistance = 0;
    var rightDistance = 0;
    this.fixedLeft.forEach((item) => {
        var domTh = document.querySelector(`${this.id} thead th[prop=${item}]`);
        var XygtableLeftList = document.querySelectorAll(`${this.id} .${item}XygtableLeft`);
        Array.from(XygtableLeftList).forEach((it)=>{
            it.style.left = leftDistance + 'px'
        })
        domTh.style.left = leftDistance + 'px'
        var width = domTh.offsetWidth;
        leftDistance += width
    })
    this.fixedRight.reverse().forEach((item) => {
        var domTh = document.querySelector(`${this.id} thead th[prop=${item}]`);
        var XygtableRightList = document.querySelectorAll(`${this.id} .${item}XygtableRight`);
        Array.from(XygtableRightList).forEach((it)=>{
            it.style.right = rightDistance + 'px'
        })
        domTh.style.right = rightDistance + 'px'
        var width = domTh.offsetWidth;
        rightDistance += width
    })
}

    // window.xygTable=xygTable
    // return xygTable
// })()


